<script setup>
// Home 页面：网站首页
// 这里展示站点标题和导航入口
</script>

<template>
  <section class="page">
    <h1 class="title">我的个人博客</h1>
    <p class="desc">一个用 Vue 构建的简单博客案例（教学示例）</p>
    <nav class="nav">
      <!-- 使用 <router-link> 进行路由跳转，避免页面整体刷新 -->
      <router-link to="/posts" class="link">文章列表</router-link>
      <router-link to="/about" class="link">关于我</router-link>
    </nav>
  </section>
</template>

<style scoped>
.page { padding: 24px; }
.title { font-size: 28px; margin: 0 0 12px; }
.desc { color: #666; margin-bottom: 16px; }
.nav { display: flex; gap: 12px; }
.link { color: #42b883; text-decoration: none; }
.link:hover { text-decoration: underline; }
</style>

<!--
学习笔记（b.1）：
- 目标：理解首页结构与 <router-link> 用法
- <template>：写页面结构（HTML）
- <script setup>：写逻辑（JS），本页逻辑简单暂时为空
- <style scoped>：页面样式，仅作用于本组件（scoped 会加作用域标记）
- <router-link to="/posts">：点击后 URL 变为 /posts，路由系统会渲染 Posts.vue
-->